{{#>base title=data.page.datatables}}

{{#*inline "pageContent"}}
    <div class="row">
        <div class="col-md-12">
            <h3 class="page-title">
                {{data.page.datatables}}
            </h3>

            <div class="tabs-wrap">
                <ul class="nav nav-tabs">
                    <li>
                        <a href="datatable.html">基础 </a>
                    </li>
                    <li>
                        <a href="datatable-extend.html">细分</a>
                    </li>
                    <li>
                        <a href="datatable-summary.html">汇总</a>
                    </li>
                    <li>
                        <a href="datatable-search.html" >搜索</a>
                    </li>
                    <li>
                        <a href="datatable-toolbar.html">工具栏</a>
                    </li>
                    <li class="active">
                        <a href="datatable-options.html">参数说明</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>


    <div class="row">
        <div class="col-md-12">

            <div class="markdown">
                <pre><code class="html">$p.dataTable(Seletor, Options);</code></pre>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3>Options</h3>
            <hr>
            <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                <thead>
                <tr>
                    <th width="200">参数</th>
                    <th>默认值</th>
                    <th width="100">数据类型</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr class="options__step">
                    <td><mark>fnDataSource</mark></td>
                    <td>--</td>
                    <td>function</td>
                    <td>一个方法，定义dataTable显示的数据源</td>
                </tr>
                <tr>
                    <td><mark>sClass</mark></td>
                    <td>--</td>
                    <td>string</td>
                    <td>自定义dataTable样式，class名称</td>
                </tr>
                <tr>
                    <td><mark>aaSorting</mark></td>
                    <td>--</td>
                    <td>Array</td>
                    <td>设置默认排序字段</td>
                </tr>
                <tr>
                    <td><mark>fnParams</mark></td>
                    <td>--</td>
                    <td>function</td>
                    <td>设置自定义请求参数</td>
                </tr>
                <tr>
                    <td><mark>aoColumns</mark></td>
                    <td>--</td>
                    <td>Array</td>
                    <td>设置列信息</td>
                </tr>
                <tr>
                    <td><mark>bAutoload</mark></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置自动加载数据</td>
                </tr>

                <tr>
                    <td><mark>bInfo</mark></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置显示总数信息</td>
                </tr>
                <tr>
                    <td><mark>bPaginate</mark></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置显示分页信息</td>
                </tr>
                <tr>
                    <td><mark>bSort</mark></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置可以排序</td>
                </tr>
                <tr>
                    <td><mark>bOrderNumbers</mark></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>设置显示序号</td>
                </tr>
                <tr>
                    <td><mark>sDom</mark></td>
                    <td>&lt;&quot;top&quot;&gt;&lt;&quot;table-scrollable&quot;rt&gt;&lt;&quot;bottom&quot;pli&gt;&lt;&quot;clear&quot;&gt;</td>
                    <td>string</td>
                    <td>设置dataTable布局</td>
                </tr>
                <tr>
                    <td><mark>aLengthMenu</mark></td>
                    <td>
                        [ [30, 50, 100], [30, 50, 100] ]
                    </td>
                    <td>Array</td>
                    <td>设置页面显示行数</td>
                </tr>
                <tr>
                    <td><mark>oSearch</mark></td>
                    <td>
                        --
                    </td>
                    <td>object</td>
                    <td>设置搜索信息 </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3>Options.aoColumns</h3>
            <hr>
            <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                <thead>
                <tr>
                    <th width="200">参数</th>
                    <th>默认值</th>
                    <th width="100">数据类型</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><mark>bSortable</mark></td>
                    <td>true</td>
                    <td>boolean</td>
                    <td>设置该字段可排序</td>
                </tr>
                <tr>
                    <td><mark>mData</mark></td>
                    <td>--</td>
                    <td>string</td>
                    <td>设置该字段也数据对象绑定的列名</td>
                </tr>
                <tr>
                    <td><mark>sClass</mark></td>
                    <td>--</td>
                    <td>string</td>
                    <td>设置该列的样式，class名称</td>
                </tr>

                <tr>
                    <td><mark>bShowSummary</mark></td>
                    <td>false</td>
                    <td>boolean</td>
                    <td>设置该列显示汇总数据</td>
                </tr>

                <tr>
                    <td><mark>fnSummaryFormat</mark></td>
                    <td>false</td>
                    <td>function</td>
                    <td>格式化汇总的值</td>
                </tr>


                </tbody>
            </table>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3>Options.oSearch</h3>
            <hr>
            <table class="table-custom table table-hover table-fixed dataTable table-scrollable">
                <thead>
                <tr>
                    <th width="200">参数</th>
                    <th>默认值</th>
                    <th width="100">数据类型</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><mark>sInput</mark></td>
                    <td>--</td>
                    <td>string</td>
                    <td>搜索文本框的选择器，例如：#txt_search</td>
                </tr>

                <tr>
                    <td><mark>sParamName</mark></td>
                    <td>--</td>
                    <td>string</td>
                    <td>请求参数名称</td>
                </tr>

                <tr>
                    <td><mark>fnCallback</mark></td>
                    <td>--</td>
                    <td>function</td>
                    <td>回调函数</td>
                </tr>

                </tbody>
            </table>

        </div>
    </div>
{{/inline}}

{{#*inline "appScript"}}
    <script type="text/javascript">
        pagurian.call("modules/slider/app", function(app) {
            app.page.index();
        });
    </script>
{{/inline}}

{{/base}}
